.dets {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 45%);
    justify-content: space-evenly;
    box-shadow: 0 0 5px 1px gray;
    padding: 20px 0;
    gap: 20px;
}

.dets > * {
    width: 100%;
    height: fit-content;
}

h1, h2, h3 {
    margin: 10px 0 0 0;
}

.dets img {
    width: 100%;
}

.desc ~ * {
    grid-column: 1 / 3;
}

.reqs {
    box-sizing: border-box;
    outline: 1px solid red;
    width: 100%;
    padding: 0 20px;
}

.chars {
    display: flex;
    flex-wrap: wrap;
}

.dets h3 {
    width: 100%;
    color: forestgreen;
}

.chars > *:not(h3) {
    width: 50%;
    margin: 0;
}

@media (max-width: 60vh) {
    .dets {
        grid-template-columns: 100%;
        gap: 0;
        padding: 10px;
        box-sizing: border-box;
    }
    .dets > * {
        margin: 10px auto;
        grid-column: 1 / 2;
    }
}

@media (min-width: 101vh) {
    .dets > * {
        grid-area: unset;
    }
}